<project-header class="top-header"></project-header>
  <project-page>

  <!-- Middle section -->
  <div class="middle-section">
    <div id="scrollable-content" class="middle-container has-scroll">
      <div class="middle-header header-light">
        <div class="container-fluid">
          <div class="page-header page-header-bleed-right">
            <h1>{{'Storage' | translate}}</h1>
          </div>
          <alerts alerts="alerts"></alerts>
          <div ng-if="!renderOptions.showGetStarted" class="row data-toolbar">
            <div class="col-sm-7">
              <project-filter></project-filter>
            </div>
          </div>
        </div>
      </div><!-- /middle-header-->
      <div class="middle-content">
        <div class="container-fluid">
          <div class="row">
            <div class="col-md-12">
              <h2>{{'PersistentVolumeClaims' | translate}}</h2>
              <table class="table table-bordered table-hover table-mobile">
                <thead>
                  <tr>
                    <th>{{'Name' | translate}}</th>
                    <th>{{'Status' | translate}}</th>
                    <th>{{'Capacity' | translate}}</th>
                    <th>{{'AccessModes' | translate}}</th>
                    <th>{{'Age' | translate}}</th>
                  </tr>
                </thead>
                <tbody ng-if="(pvcs | hashSize) == 0">
                  <tr><td colspan="5"><em>{{'stroageemptyMessage' | translate}}</em></td></tr>
                </tbody>
                <tbody ng-repeat="pvc in pvcs | orderObjectsByDate : true">
                  <tr>
                    <td data-title="Name"><a ng-href="{{pvc | navigateResourceURL}}">{{pvc.metadata.name}}</a></td>
                    <td data-title="Status">
                      <status-icon status="pvc.status.phase" disable-animation></status-icon>
                      {{pvc.status.phase}}
                      <span ng-if="pvc.spec.volumeName">to volume <strong>{{pvc.spec.volumeName}}</strong></span>
                    </td>
                    <td data-title="Capacity">
                      <span ng-if="pvc.spec.volumeName">
                        <span ng-if="pvc.status.capacity['storage']">{{pvc.status.capacity['storage'] | usageWithUnits: 'storage'}}</span>
                        <span ng-if="!pvc.status.capacity['storage']">unknown</span>
                      </span>
                      <span ng-if="!pvc.spec.volumeName">
                        <span>-</span>
                      </span>
                    </td>
                    <td data-title="Access Modes">{{pvc.spec.accessModes | accessModes:'long' | join}}</td>
                    <td data-title="Age"><relative-timestamp timestamp="pvc.metadata.creationTimestamp" drop-suffix="true"></relative-timestamp></td>
                  </tr>
                </tbody>
              </table>
            </div><!-- /col-* -->
          </div>
        </div>
      </div><!-- /middle-content -->
    </div><!-- /middle-container -->
  </div><!-- /middle-section -->
  </project-page>
